<template>
  <draw-component
    :drawer-visible="state.show"
    size="750px"
    title="部门迁移"
    :show-bottom-btn="false"
    @close-drawer="handleClose()"
  >
    <el-form class="my-form-box2 df aic">
      <el-form-item label="当前部门:" style="margin-right: 60px">
        <el-select v-model="state.formData.oldDepart" placeholder="请选择" @change="handleChange">
          <el-option
            v-for="item in departmentList"
            :key="item.code"
            :label="`${item.code} - ${item.name}`"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="待迁移部门:">
        <el-select v-model="state.formData.newDepart" placeholder="请选择">
          <el-option
            v-for="item in departmentList"
            :key="item.code"
            :label="`${item.code} - ${item.name}`"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <table-page-content
      ref="tableRef"
      :loading="state.loading"
      :table-data="state.tableList"
      :table-headers="chooseHeaders"
      :table-height="'70vh'"
      :is-pager="false"
      :is-selection="true"
      :is-slot-num="false"
    >
    </table-page-content>
    <template #footBtn>
      <el-button class="btn cancel" @click="handleClose">取消</el-button>
      <el-button class="btn save" type="primary" @click="handleSubmit">迁移</el-button>
    </template>
  </draw-component>
</template>

<script lang="ts" setup>
import { chooseHeaders } from '../config'
import { useProxy } from '@/utils/proxy'
import { changeDepart } from '../api'
import { PropType } from 'vue'
const props = defineProps({
  departmentList: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})
const emit = defineEmits(['handleAdded'])
const tableRef = ref()
const { proxy } = useProxy()
const state = reactive({
  loading: false,
  show: false,
  formData: {
    oldDepart: '',
    newDepart: ''
  },
  tableList: []
})
// 选择部门回调
const handleChange = () => {
  getList()
}
// 关闭回调
const handleClose = () => {
  state.show = false
  state.formData = {
    oldDepart: '',
    newDepart: ''
  }
  state.tableList = []
}
// 获取列表数据
const getList = () => {
  state.loading = true
  state.tableList = []
  proxy.$api
    .getUserList<any>({ department: state.formData.oldDepart })
    .then((res) => {
      state.tableList = res.data
      state.loading = false
    })
    .catch(() => {
      state.loading = false
    })
}
// 提交
const handleSubmit = async () => {
  let selectItem = tableRef.value.getAllSelectItem()
  if (selectItem.length == 0) {
    return proxy.$message.msgError('请至少选择一条用户数据')
  }
  if (!state.formData.newDepart || !state.formData.oldDepart) {
    return proxy.$message.msgError('请选择部门')
  }
  if (state.formData.newDepart == state.formData.oldDepart) {
    return proxy.$message.msgError('不能选择相同部门进行迁移')
  }
  await changeDepart({ ...state.formData, userIds: selectItem.map((v: any) => v.userId) })
  proxy.$message.msgSuccess('迁移成功')
  emit('handleAdded')
  handleClose()
}
defineExpose({ state })
</script>

<style lang="scss" scoped></style>
